<style scoped>
  .open{
    background: #edf1f5;
    overflow: hidden;
  }
  .content{
    /*margin-top: 100px;*/
  }
  .content{
    width: 100%;
    height:100%;
    color: #777287;
    padding-top: 40px;
  }
  .content>div{
    border-top: 1px solid #e9e9e9;
    border-bottom: 1px solid #e9e9e9;
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    align-items: center;
    padding: 0 0 0 10px;
    height:50px;
    background: #ffffff;
  }
  .content>div>div{
    flex: 1;
  }
  .content>div>.phone-right{
    display: flex;
    flex-direction: row;
    margin-left: 16px;
    height:100%;
  }
  .content>div>.phone-right>p{
    flex: 1;
    background: #e9e9e9;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 0;
  }
  @media screen and (max-width: 320px) {
    /*.content>div>h3{*/
      /*width:46px;*/
    /*}*/
    .content>div input{
      font-size: 1.5rem;
    }
    .next-step{
      height:35px;
    }
    /*.content>div>.phone-right>p{*/
      /*width:80px;*/
    /*}*/
  }
  @media screen and (max-width:375px) and (min-width:321px) {
    /*.content>div>h3{*/
      /*width:60px;*/
    /*}*/
    .content>div input{
      font-size: 1.8rem;
    }
    .next-step{
      height:39px;
    }
    /*.content>div>.phone-right>p{*/
      /*width:88px;*/
    /*}*/
  }
  @media screen and (min-width: 376px){
    /*.content>div>h3{*/
      /*width:65px;*/
    /*}*/
    .content>div input{
      font-size: 1.9rem;
    }
    .next-step{
      height:45px;
    }
    /*.content>div>.phone-right>p{*/
      /*width:100px;*/
    /*}*/
  }
  .content>div input{
    justify-content: center;
    align-items: center;
    border:none;
    height:100%;
  }
  .content>div input::-webkit-input-placeholder{
    opacity: 0.3;
  }
  .yan{
    border-top: none!important;
    display: flex;
  }
  .yan input{
    flex: 1;
    margin-left: 16px;
  }
  .next{
    width:100%;
    position: absolute;
    bottom:10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    /*padding: 0 10px;*/
    color: #7F7A8E;
  }
  .next .agree{
    display: flex;
    flex-direction: row;
    width:98%;
  }
  .next .agree div{
    margin-left: 4px;
  }
  .next-step{
    width:100%;
    margin-top: 8px;
  }
  .next-step a{
    background: #4D66FF;
    height:100%;
    margin: 0 10px;
    display: flex;
    justify-content:center;
    align-items: center;
    border-radius: 4px;
  }
  .next-step a h3{
    color: #ffffff;
  }
  .xzcolor{
    color: #4D66FF;
  }
</style>

<template>
  <div class="open">
    <my-kh></my-kh>
    <div class="content" ref="nana">
      <div class="phone">
        <h3>手机号</h3>
        <div class="phone-right">
          <input type="text" placeholder="您的手机号" ref="mobile">
          <p @click="getCode">获取验证码</p>
        </div>
      </div>
      <div class="yan">
        <h3>验证码</h3>
        <div>
          <input type="text" placeholder="请输入收到的验证码">
        </div>
      </div>
    </div>
    <div class="next">
      <div class="agree">
        <h2 class="iconfont " @click="choose" v-bind:class="{'icon-fangxingweixuanzhong': weixz,'icon-fangxingxuanzhongfill xzcolor':xz}"></h2>
        <div>
          <h4>我同意提供个人信息给证券公司用于证券开户,已阅读并同意<span style="color: #4D66FF;">《全部开户业务协议》</span></h4>
        </div>
      </div>
      <div class="next-step">
        <router-link to="/open2"><h3>下一步</h3></router-link>
      </div>
    </div>
  </div>
</template>

<script>
  import myKh from '../components/kh.vue'
  import axios from 'axios'
  import sha256 from 'sha256'

  export default {
    components: {
      myKh
    },
    data () {
      return {
        weixz: true,
        xz: false
      }
    },
    mounted () {
       let w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
      let h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
      let h1 = h - 110
      this.$refs.nana.style.height = h1 + 'px'
    },
    methods: {
      getCode () {
        let ram = Math.random()
        let time = Math.round(new Date().getTime()/1000)
        console.log(time)
        let yzm = Math.round((Math.random())*1000000)
        let shixiao = 10
        let getSig = sha256(`appkey=7848206d77d249bb8ead22f3a5877663&random=${ram}&time=${time}&mobile=${this.$refs.mobile.value}`)
        console.log(this.$refs.mobile.value)
        let sendData = {
          "tel": {
            "nationcode": 86,
            "mobile": this.$refs.mobile.value
          },
          "type": 0,
          "msg": `验证码为${yzm}，请于${shixiao}分钟内填写`,
          "sig": getSig,
          "time": time,
          "extend": "",
          "ext": ""
        }
        axios({
          method: 'post',
          url: "https://yun.tim.qq.com/v5/tlssmssvr/sendsms?sdkappid=1400035328&random="+ram,
          data: JSON.stringify(sendData)
        }).then(function (data) {
          console.log(data)
        })
      },
      choose () {
        this.weixz = !this.weixz
        this.xz = !this.xz
      }
    }
  }
</script>
